<template>
  <div class="table-box">
    <div class="hot-class">
      <div class="title-box">
        <div class="item" style="min-width: 171px">显示名称</div>
        <div class="item">道具</div>
        <div class="item" v-if="labelName === '1'">图片</div>
        <div class="item">操作</div>
      </div>
      <div class="content-box" v-if="tableData && tableData.length > 0">
        <div
          class="dragging-item"
          v-for="(item, index) in tableData"
          v-dragging="{ item: item, list: tableData }"
          :key="index"
        >
          <div class="item">{{ item.name }}</div>
          <div class="item">
            {{ item.typeName }}
          </div>
          <div class="item" v-if="labelName === '1'">
            <div class="pic">
              <img :src="item.pic" alt="">
            </div>
          </div>
          <div class="item">
            <el-link type="primary" @click="editProps(item)" style="margin-right: 20px;">编辑</el-link>
            <el-link type="danger" @click="delProps(item)">删除</el-link>
          </div>
        </div>
      </div>
      <div class="noData" v-else>
          暂无数据
      </div>
    </div>
  </div>
</template>
<script>
export default {
    props: {
        tableData: {
            type: Array,
            default: () => []
        },
        labelName: {
            type: String,
            deefault: '0'
        }
    },
    data () {
        return {

        }
    },
    mounted () {
        this.$dragging.$on('dragged', ({ value }) => {
            this.$emit('dragChange')
        })
    },
    methods: {
        editProps (item) {
            this.$emit('editProps', item)
        },
        delProps (item) {
            this.$emit('delProps', item)
        }
    }
}
</script>
<style lang="scss" scoped>
  .table-box {
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-right: none;
    .title-box {
      display: flex;
      border-bottom: 1px solid #ebeef5;
      .item {
        display: flex;
        align-items: center;
        flex: 1;
        word-break: break-all;
        padding: 10px;
        height: 60px;
        font-size: 14px;
        color: #909399;
        font-weight: bold;
        border-right: 1px solid #ebeef5;
      }
    }

    .content-box {
      .dragging-item {
        display: flex;
        border-bottom: 1px solid #ebeef5;
        .item {
          flex: 1;
          padding: 10px;
          font-size: 14px;
          color: #606266;
          display: flex;
          align-items: center;
          border-right: 1px solid #ebeef5;
          word-break: break-all;
          .status {
            color: #f56c6c;
          }
          .showColor {
            color: #67c23a;
          }
        }
      }
      .detail-img {
        width: 70px;
        img {
          width: 100%;
        }
      }
      .no-detail-img {
        width: 70px;
        text-align: center;
      }
    }
    .pic{
        width: 180px;
        img{
          width: 100%;
        }
    }
    .noData{
      padding: 100px 0;
      text-align: center;
      color: #999999;
    }
  }
</style>
